<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    @ok="handleModelSubmit"
    :destroyOnClose="true"
    :closeFunc="close"
    :body-style="{ marginLeft: '10px', marginRight: '10px' }"
  >
    <template v-if="key === 'add'">
      <AssetFilesDetailForm
        ref="assetFileDetailForm"
        @upload="getImgData"
        @delete-img="deleteImgData"
      />
    </template>
    <template v-else>
      <Upload
        accept=".json"
        :max-count="1"
        :beforeUpload="uploadJson"
        listType="text"
        @remove="removeJson"
      >
        <Button type="primary">上传JSON文件</Button>
      </Upload>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Upload, Button } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import AssetFilesDetailForm from './AssetFilesDetailForm.vue';
  import { postAssetProfile } from '/@/api/thingsborad/profile/assetProfile/assetProfile';
  let key = ref<string>('');
  const emit = defineEmits(['add']);
  let imgData = ref<any>(null);
  // assetFileDetailForm资产配置详情表单实例
  const assetFileDetailForm = ref<any>(null);
  //导入文件的内容
  const fileContent = ref<any>(null);
  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    key.value = data?.key;
    setModalProps({
      title: data?.key == 'add' ? '添加资产配置' : '导入资产配置',
    });
  });

  function getImgData(data: any) {
    imgData.value = data;
  }
  function deleteImgData() {
    imgData.value = null;
  }

  function uploadJson(file: any) {
    const reader: any = new FileReader();
    reader.readAsText(file);
    reader.addEventListener('load', () => {
      try {
        const jsonData = JSON.parse(reader.result);
        fileContent.value = jsonData;
      } catch (error) {
        console.error('JSON文件读取或解析错误:', error);
      }
    });
    return false;
  }

  function removeJson() {
    fileContent.value = {};
    return true;
  }
  async function close() {
    imgData.value = null;
    fileContent.value = null;
    return true;
  }
  async function handleModelSubmit() {
    if (key.value == 'add') {
      await assetFileDetailForm.value.validate().then(async (res) => {
        

        if (res.defaultDashboardId != undefined) {
          res.defaultDashboardId = JSON.parse(res.defaultDashboardId);
        }
        if (res.defaultEdgeRuleChainId != undefined) {
          res.defaultEdgeRuleChainId = JSON.parse(res.defaultEdgeRuleChainId);
        }
        if (res.defaultRuleChainId != undefined) {
          res.defaultRuleChainId = JSON.parse(res.defaultRuleChainId);
        }
        res.image = imgData.value;

        try {
          await postAssetProfile(res);
        } catch (error) {
          console.error('添加资产配置失败', error);
        }
      });
      assetFileDetailForm.value.resetFields();
    } else {
      try {
        await postAssetProfile(fileContent.value);
      } catch (error) {
        console.error('添加资产配置失败', error);
      }
    }
    emit('add');
    imgData.value = null;
    fileContent.value = null;
    closeModal();
  }
</script>
